<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="box">
    <div class="title">青青草原聊天室</div>
    <div class="main">
        <div class="selImg">
            <div class="imgItem">
                <img src="image/manYangYang.webp">
            </div>
            <div class="imgItem">
                <img src="image/lanYangYang.jpg">
            </div>
            <div class="imgItem">
                <img src="image/meiYangYang.webp">
            </div>
            <div class="imgItem">
                <img src="image/xiYangYang.jpg">
            </div>
            <div class="imgItem">
                <img src="image/feiYangYang.jpg">
            </div>
            <div class="imgItem">
                <img src="image/huiTaiLang.webp">
            </div>
            <div class="imgItem">
                <img src="image/hongTaiLang.jpg">
            </div>
            <div class="imgItem">
                <img src="image/xiaoHuiHui.jpg">
            </div>
        </div>
        <div class="setName">
            <input class="ipt" placeholder="请输入昵称" onblur="iptBlur()">
        </div>
        <div class="login">
            <button class="loginBtn" onclick="enterChatRoom()">进入聊天室</button>
        </div>
    </div>
</div>
<script>
    let ws=new WebSocket('ws://localhost:8081')
    // const LocalStorage = require('node-localstorage').LocalStorage
    // let localStorage = new LocalStorage('./scratch');
    let selImg=document.querySelector('.selImg')
    let historyE=[]//这里用来存放点击过的图片
    let imgSrc=''
    let usrName=''
    selImg.addEventListener('click',function (e){
        historyE.forEach(item=>{//清除数组中所有元素的边框样式
            item.style.border='none'
        })
        historyE.push(e.target)
        //因为是事件委托，所以点击父元素时也会将父元素存进数组，所以需要过滤掉父元素，也需要过滤掉之前点击过的元素
        let curE=historyE.filter(item=>{return (item === e.target)&&(item.className !=='selImg')})
        // 只给当前元素设置边框样式
        curE[curE.length-1].style.border='3px solid #FF6F91'

        imgSrc=curE[curE.length-1].src
    })
    function iptBlur() {
        let ipt=document.querySelector('.ipt')
        usrName=ipt.value
    }
    function enterChatRoom() {
        if(usrName.length===0){
            alert('请输入姓名！')
            return
        }
        if(imgSrc.length===0){
            alert('请选择头像！')
            return;
        }
        ws.addEventListener('open',function () {
        })
        let loginInfo={name:usrName,img:imgSrc,enterOrMsg:'enter'}
        ws.send(JSON.stringify(loginInfo))
        window.open('./index.html')
    }

</script>
<style>
    body{
        margin: 0;
        pading:0;
    }
    .box{
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(45deg, #845EC2, #D65DB1,#FF6F91,#FF9671,#FFC75F,#F9F871);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .title{
        width: 240px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        color: white;
    }
    .main{
        width: 600px;
        height: 400px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border-radius: 50px;
        box-sizing: border-box;
        background-image: linear-gradient(45deg,#845EC2,#B39CD0,#FBEAFF,#FF6F91);
    }
    .selImg{
        width: 100%;
        height: 120px;
        border: 1px solid black;
        margin-bottom: 10px;
        margin: 0 auto;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: scroll;
        padding-left: 160px;
        box-sizing: border-box;
    }
    /*对滚动条美化处理一下，去除滚动条外部*/
    ::-webkit-scrollbar-track{
        display: none;
    }
    /*滚动条高度*/
    ::-webkit-scrollbar{
        height:14px;
    }
    /*滚动条可以拖动部分的样式*/
    ::-webkit-scrollbar-thumb{
        border-radius: 4px;
        background-color: rgba(0,0,0,.1)
    }
    .selImg>.imgItem{
        width: 80px;
        height: 80px;
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        flex-shrink: 0;
        cursor: pointer;
    }
    .selImg>.imgItem img{
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
    .setName{
        width: 90%;
        height: 42px;
        margin-bottom: 10px;
        margin: 0 auto;
    }
    .setName>input{
        width: 100%;
        height: 100%;
        border-radius: 50px;
        padding-left: 18px;
        box-sizing: border-box;
        outline: none;
    }
    .login{
        width: 50%;
        height: 80px;
        text-align: center;
        margin: 0 auto;
    }
    .login>button{
        width: 90%;
        height: 100%;
        border-radius: 50px;
        cursor: pointer;
        background-image: linear-gradient(45deg,#845EC2,#00C9A7);
    }
</style>
</body>
</html>